<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03_元素属性操作</title>	
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 
		元素属性操作：针对固定属性、附加属性操作
		元素   固定属性---清除：元素是否可用属性【w3c元素出现设置属性】
		            附加属性---清楚：表单为主，附加属性checked、disabled...
		prop()       ---功能：与attr类似，附加属性，针对表单，默认选中
		removeprop() ---功能：与removeattr类似，附加属性，针对表单，移除选中
		 -->
	</head>
	<body>
		<h1>prop()和removeprop()函数使用</h1>
		<!-- 复选框，默认选中  id="myCheckBox" 
		  三个按钮  id="getPropBtn"    获取属性
		           id="setPropBtn"    设置属性
				   id="removePropBtn" 移除属性
		 弹出显示文字：div id="output"
		-->
		<input type="checkbox" id="myCheckBox" checked />
		<button id="getPropBtn">获取属性</button>
		<button id="setPropBtn">设置属性</button>
		<button id="removePropBtn">移除属性</button>
		<div id="output"></div>
		<script>
			// prop()  点击--获取属性--打印复选框的值
			//                        复选框的值是：+变量
			// prop()---input元素--checked属性---属性值bool[true,false]
			$("#getPropBtn").click(function(){
				// prop()获取元素的附加属性--input中checked
				var isChecked=$("#myCheckBox").prop("checked");
				$("#output").text("复选框的值是："+isChecked);
			});
			//prop("checked",false)  取消选中
			$("#setPropBtn").click(function(){
				 $("#myCheckBox").prop("checked",false);
				 $("#output").text("复选框的值是：false");
			});
			// removeProp()取消选中--删除  checked属性
			$("#removePropBtn").click(function(){
				 $("#myCheckBox").prop("checked");
				 $("#output").text("复选框的属性已经移除~");
			});
		</script>
	</body>
</html> 